<!--
 * @Description: 
 * @Date: 2022-06-30 10:17:53
 * @LastEditTime: 2022-07-29 08:38:58
 * @FilePath: \vue3\src\views\refTest.vue
-->
<template>
  <div class="div-column">
    ref：{{ valueRef }}
    <button @click="changeRef()">改变ref</button>
    shallowRef：{{ valueShallowRef }}
    <button @click="changeShallowRef()">改变ShallowRef</button>
    <button @click="changeShallowRef2()">改变ShallowRef2</button>
    <button @click="changeTriggerRef()">改变TriggerRef</button>
    myCustomValue:{{ myCustomValue }}
    <button @click="changeCustomRef()">改变customRef</button>
  </div>
</template>
<script>
import { ref, shallowReactive, shallowRef, triggerRef, customRef } from "vue";
export default {
  setup() {
    //改变ref
    const valueRef = ref(0);
    function changeRef() {
      valueRef.value++;
    }
    //改变ShallowRef
    const valueShallowRef = shallowRef({
      name: "犬夜叉",
    });
    function changeShallowRef() {
      valueShallowRef.value.name = "杀生丸";
      console.log(valueShallowRef.value.name);
    }
    function changeShallowRef2() {
      valueShallowRef.value = { name: "杀生丸" };
      console.log(valueShallowRef.value.name);
    }
    function changeTriggerRef() {
      valueShallowRef.value.name = "杀生丸";
      console.log(valueShallowRef.value.name);
      triggerRef(valueShallowRef);
    }
    function myCustomRef(value) {
      return customRef((track, trigger) => {
        return {
          get() {
            //追踪
            track();
            return value + "爱你破烂的衣裳";
          },
          set(newValue) {
            value = newValue;
            //触发更新
            trigger();
          },
        };
      });
    }
    const myCustomValue = myCustomRef("奈落");
    function changeCustomRef() {
      myCustomValue.value = "米勒法师";
      console.log(myCustomValue.value);
    }

    return {
      valueRef,
      changeRef,
      valueShallowRef,
      changeShallowRef,
      changeShallowRef2,
      changeTriggerRef,
      myCustomValue,
      changeCustomRef,
    };
  },
};
</script>
